@page "/maps/maps-with-slider"

@using Syncfusion.Blazor.Maps
@using Syncfusion.Blazor.Inputs
@using System.Globalization;

@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample visualizes the average annual population growth of the countries in the North America continent.</p>
</SampleDescription>
<ActionDescription>
    <p> This sample visualizes the average annual population growth of the countries in the North America continent. The range color mapping is applied to the shapes based on the population growth of the countries in percentage. Tooltip is enabled in this example.</p>
</ActionDescription>

<div class="control-section">
    <SfMaps Height="400">
        <MapsMargin Bottom="20"/>
        <MapsZoomSettings Enable="false"/>
        <MapsTitleSettings Text="Average annual population growth in North American countries">
            <MapsTitleTextStyle Size="16px"/>
        </MapsTitleSettings>
        <MapsAnnotations>
            <MapsAnnotation HorizontalAlignment="AnnotationAlignment.Center" Y="93%">
                <ContentTemplate>
                    <div style="height:70px;width:250px; margin-left:-50px">
                        <div style="width: 60%;">
                            <div>
                                <input type="range" value="@SliderPointerValue" min="-1.5" max="3.75" step="0.75" @onchange="RangeStartChange" style="width:250px;height:48px;" />
                            </div>
                        </div>
                    </div>
                </ContentTemplate>
            </MapsAnnotation>
        </MapsAnnotations>
        <MapsLayers>
            <MapsLayer ShapeData='new {dataOptions ="data/maps/north-america.json"}' ShapePropertyPath="@ShapePropertyPath" ShapeDataPath="Name" DataSource="@PopulationGrowth" TValue="Growth">                
                <MapsShapeSettings ColorValuePath="Population">
                    <MapsShapeColorMappings>
                        <MapsShapeColorMapping StartRange="-1.5" EndRange="-0.75" Color='@ColorMappingColorOne' />
                        <MapsShapeColorMapping StartRange="-0.75" EndRange="0.1" Color='@ColorMappingColorTwo' />
                        <MapsShapeColorMapping StartRange="0.2" EndRange="0.75" Color='@ColorMappingColorThree' />
                        <MapsShapeColorMapping StartRange="0.76" EndRange="1.5" Color='@ColorMappingColorFour' />
                        <MapsShapeColorMapping StartRange="1.5" EndRange="2.25" Color='@ColorMappingColorFive' />
                        <MapsShapeColorMapping StartRange="2.25" EndRange="3" Color='@ColorMappingColorSix' />
                        <MapsShapeColorMapping StartRange="3" EndRange="3.75" Color='@ColorMappingColorSeven' />
                    </MapsShapeColorMappings>
                </MapsShapeSettings>
                <MapsLayerTooltipSettings Visible="true" Format="${Name} : ${Population}%"/>
            </MapsLayer>
        </MapsLayers>
    </SfMaps>
</div>
<style>
    .content-wrapper {
        width: 52%;
        margin: 0 auto;
        min-width: 185px;
    }

    .sliderwrap {
        margin-top: 45px;
    }

    .e-bigger .content-wrapper {
        width: 80%;
    }

    .sliderwrap label {
        padding-bottom: 50px;
        font-size: 13px;
        font-weight: 500;
        margin-top: 15px;
    }

    .userselect {
        -webkit-user-select: none; /* Safari 3.1+ */
        -moz-user-select: none; /* Firefox 2+ */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
    }
</style>
@code {
    public string[] ShapePropertyPath = { "name" };
    public string[] ColorMappingColorOne = { "#7E9CDC" };
    public string[] ColorMappingColorTwo = { "#DCD57E" };
    public string[] ColorMappingColorThree = { "#7EDCA2" };
    public string[] ColorMappingColorFour = { "#6EB5D0" };
    public string[] ColorMappingColorFive = { "#A6DC7E" };
    public string[] ColorMappingColorSix = { "#DCA87E" };
    public string[] ColorMappingColorSeven = { "#d075c6" };
    public double SliderPointerValue = 3;
    public bool OpacityChecked;
    public double MinRange;
    private void RangeStartChange(Microsoft.AspNetCore.Components.ChangeEventArgs args)
    {
        MinRange = Convert.ToDouble(args.Value, CultureInfo.InvariantCulture);
        if (MinRange >= -1.5 && MinRange <= -0.75)
        {
            ColorSet("#E5E5E5", "#E5E5E5", "#E5E5E5", "#E5E5E5", "#E5E5E5", "#E5E5E5", "#E5E5E5");
        }
        if (MinRange >= -0.75 && MinRange <= 0)
        {
            ColorSet("#7E9CDC", "#E5E5E5", "#E5E5E5", "#E5E5E5", "#E5E5E5", "#E5E5E5", "#E5E5E5");
        }
        if (MinRange >= 0 && MinRange <= 0.75)
        {
            ColorSet("#7E9CDC", "#DCD57E", "#E5E5E5", "#E5E5E5", "#E5E5E5", "#E5E5E5", "#E5E5E5");
        }
        if (MinRange >= 0.75 && MinRange <= 1.5)
        {
            ColorSet("#7E9CDC", "#DCD57E", "#7EDCA2", "#E5E5E5", "#E5E5E5", "#E5E5E5", "#E5E5E5");
        }
        if (MinRange >= 1.5 && MinRange <= 2.25)
        {
            ColorSet("#7E9CDC", "#DCD57E", "#7EDCA2", "#6EB5D0", "#E5E5E5", "#E5E5E5", "#E5E5E5");
        }
        if (MinRange >= 2.25 && MinRange <= 3)
        {
            ColorSet("#7E9CDC", "#DCD57E", "#7EDCA2", "#6EB5D0", "#A6DC7E", "#E5E5E5", "#E5E5E5");
        }
        if (MinRange >= 3 && MinRange <= 3.75)
        {
            ColorSet("#7E9CDC", "#DCD57E", "#7EDCA2", "#6EB5D0", "#A6DC7E", "#DCA87E", "#E5E5E5");
        }
        if (MinRange >= 3.75)
        {
            ColorSet("#7E9CDC", "#DCD57E", "#7EDCA2", "#6EB5D0", "#A6DC7E", "#DCA87E", "#d075c6");
        }
    }
    private void ColorSet(string Color1, string Color2, string Color3, string Color4, string Color5, string Color6, string Color7) {
        ColorMappingColorOne = new string[] { Color1 };
        ColorMappingColorTwo = new string[] { Color2 };
        ColorMappingColorThree = new string[] { Color3 };
        ColorMappingColorFour = new string[] { Color4 };
        ColorMappingColorFive = new string[] { Color5 };
        ColorMappingColorSix = new string[] { Color6 };
        ColorMappingColorSeven = new string[] { Color7 };
    }
    public class Growth {
        public string Name { get; set; }
        public double Population { get; set; }
    };
    public List<Growth> PopulationGrowth = new List<Growth> {
        new Growth { Name="United States", Population=0.75},
        new Growth { Name="Mexico", Population=1.8},
        new Growth { Name="Canada", Population=0.79},
        new Growth { Name="Guatemala", Population=2.93},
        new Growth { Name="Cuba", Population=0.25},
        new Growth { Name="Haiti", Population=2.31},
        new Growth { Name="Dominican Rep.", Population=0.98},
        new Growth { Name="Honduras", Population=2.29},
        new Growth { Name="El Salvador", Population=0.92},
        new Growth { Name="Nicaragua", Population=2.37},
        new Growth { Name="Costa Rica", Population=1.63},
        new Growth { Name="Panama", Population=1.37},
        new Growth { Name="Puerto Rico", Population=-1.13},
        new Growth { Name="Jamaica", Population=0.26},
        new Growth { Name="Trinidad and Tobago", Population=0.52},
        new Growth { Name="Bahamas", Population=1.34},
        new Growth { Name="Belize", Population=2.50},
        new Growth { Name="Barbados", Population=0.35},
        new Growth { Name="Saint Lucia", Population=0.58},
        new Growth { Name="Saint Vincent and the Grenadines", Population=0.1},
        new Growth { Name="U.S. Virgin Is.", Population=0.1},
        new Growth { Name="Grenada", Population=0.1},
        new Growth { Name="Antigua and Barbuda", Population=1.14},
        new Growth { Name="Dominica", Population=0.1},
        new Growth { Name="Bermuda", Population=0.1},
        new Growth { Name="Cayman Is.", Population=3.51},
        new Growth { Name="Greenland", Population=0.1},
        new Growth { Name="St. Kitts and Nevis", Population=0.1},
        new Growth { Name="Sint Maarten", Population=2.63},
        new Growth { Name="British Virgin Is.", Population=3.33},
        new Growth { Name="Anguilla", Population=0.1},
        new Growth { Name="St-Barthélemy", Population=0.1},
        new Growth { Name="St. Pierre and Miquelon", Population=0.1},
        new Growth { Name="Montserrat", Population=0.1}
    };

}